<script setup>
import { reactive,ref } from 'vue';
import {login} from '@/api/user'
//导入userAdminStore函数
import {useUserStore}from '@/stores/user'
//导入userRouter函数
import{useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'


//获取userStore对象
const userStore = useUserStore()
//获取router对象
const router = useRouter()

const ruleForm = reactive({
    uaccount:'',
    upwd: ''
})

//trigger当鼠标移开时开始校验
const rules = reactive({
    uaccount:[
    {required: true,message:'请输入用户名',trigger:'blur'}
    ],
    upwd:[
        {required: true,message:'请输入密码',trigger:'blur'},
        {min:6,max:16, message:"密码长度为6到16",trigger:'blur'}
    ]
})
//获取到el-form元素的原生DOM对象
const ruleFormRef = ref()
const submitForm = (formEl) => {
  if (!formEl) return
  //el-form元素的原生DOM对象，然后进行验证，validateS是DOM对象的函数
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      //axios把用户名和密码请求后端
      login(ruleForm).then((res)=>{
        if(res.status==200){
          console.log('登录成功',res.data)
          userStore.saveUser(res.data)
          //跳转
          router.push({
            path:"/home"
          })
        }else{
          ElMessage.error('用户名或者密码错误')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
    
  })
}


const goToRegister = ()=>{
  router.push({
    path:"/register"
  })
}



</script>
<template>
  <div class="login-container">
    <el-card class="login-card" shadow="always">
      <h2 class="login-title">用户登录</h2>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        status-icon
      >
        <el-form-item label="用户名" prop="uaccount">
          <el-input v-model="ruleForm.uaccount" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="密码" prop="upwd">
          <el-input
            v-model="ruleForm.upwd"
            type="password"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>
        
        <div style="display: flex; width: 100%;height: 70px;align-items: center;justify-content: center;">
          <el-button
            type="info"
            @click="submitForm(ruleFormRef)"
            class="login-button"
          >
            登录
          </el-button>
          <el-button
            type="info"
            @click="goToRegister"
            class="register-button"
          >
            注册
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: cover; /* 或 'contain' 根据需要选择 */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/image/20240823/619f531691ffa1637831446904.jpeg');
}

.login-card {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，调整透明度 */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #868686;
}

.login-button {
  width: 40%;
}

.register-button {
  width: 40%;
}
</style>